import styled from '@emotion/styled';
import { t } from 'i18next';
import React from 'react';
import { appendToken } from '@/utils/index';

interface PreviewUrlProps {
	url: string;
}

const PreviewContainer = styled.div``;

const PreviewLabel = styled.p`
	text-align: left;
	margin: 0;
	padding: 10px 0;
`;

const URLContainer = styled.p`
	margin: 0;
	padding: 10px;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
`;

const PreviewUrl = (props: PreviewUrlProps) => {
	const { url } = props;

	const open = () => {
		if (url) window.open(appendToken(url));
	};

	const getPreview = () => {
		if (!url) return null;
		return (
			<>
				<PreviewLabel>{t('preview-url')}</PreviewLabel>
				<URLContainer onClick={open}>{url}</URLContainer>
			</>
		);
	};

	return <PreviewContainer>{getPreview()}</PreviewContainer>;
};

export default PreviewUrl;
